<template>
	<view class="hui">
		<u-navbar leftIconColor="black" :autoBack="true" title="订单详情" titleStyle="color:black" :placeholder="true"
			bgColor="transparent">
		</u-navbar>
		<view class="list_box">
			<view class="info_box info_border">
				<view class="b_flex">
					<image class="img" :src="info.quilt.sliderImage"></image>
					<view class="n_box">
						<view class="b_flex_c_s">
							<view class="name">{{info.quilt.name}}</view>
							<view class="price"><span class="money">￥</span>{{info.quilt.price}}</view>
						</view>
						<view class="num">x{{info.num}}</view>
					</view>
				</view>
				<view class="b_flex_c_s yj_box">
					<view>租用天数</view>
					<view>{{info.days}}</view>
				</view>
				<view class="b_flex_c_s yj_box">
					<view>租赁押金</view>
					<view class="b_orange">￥{{info.deposit}}</view>
				</view>
				<view class="sf">实付款￥{{info.price}}</view>
			</view>
			<view class="info_box">
				<view class="h_box info_border">
					<view class="b_flex_c_s mb">
						<view>取件人</view>
						<view>{{info.nickname}}</view>
					</view>
					<view class="b_flex_c_s">
						<view>电话</view>
						<view>{{info.phone}}</view>
					</view>
				</view>
				<view class="xian"></view>
				<view class="b_box info_border">
					<view class="b_flex_c_s mb">
						<view>订单编号</view>
						<view>{{info.orderId}}</view>
					</view>
					<view class="b_flex_c_s mb">
						<view>支付方式</view>
						<view>微信支付</view>
					</view>
					<view class="b_flex_c_s">
						<view>下单时间</view>
						<view>{{info.createTime}}</view>
					</view>
				</view>

			</view>
		</view>
		<!-- <view class="bottom_box b_flex_cc" v-if="!info.complete">
			
			<view class="th but" @click="complete">确认归还</view>
		</view> -->
	</view>
</template>

<script>
	import {
		deviceOrderInfo,quiltComplete
	} from '@/require/api.js';
	export default {
		data() {
			return {
				info: {},
				params: {
					id: ''
				}
			}
		},
		onLoad(data) {
			this.params.id = data.id;
			this.getInfo();
		},

		methods: {
			complete(){
				let _ = this;
				uni.showModal({
					title: '确定要归还吗?',
					success(res) {
						if (res.confirm) {
							quiltComplete({id:_.info.id}).then(ress => {
								_.$project.toast(ress.message);
								_.getInfo();
							});
						}
					}
				})
			},
			async getInfo() {
				let {
					data
				} = await deviceOrderInfo(this.params);
				this.info = data;
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-navbar__content__title {
		font-size: 32rpx !important;
		font-weight: bold;
		color: #252B50 !important;
	}

	.list_box {
		box-sizing: border-box;
		padding: 30rpx;
	}

	.info_border {
		box-sizing: border-box;
		padding: 30rpx;
	}

	.info_box {
		background-color: #fff;
		width: 100%;
		border-radius: 15rpx;

		margin-bottom: 30rpx;
	}

	.img {
		width: 142rpx;
		height: 142rpx;
		border-radius: 20rpx;
		margin-right: 20rpx;
	}

	.name {

		font-size: 27rpx;

		font-weight: 500;
		color: #252B50;

	}

	.money {
		font-size: 24rpx;
	}

	.price {
		font-size: 30rpx;
		color: #252B50;
	}

	.num {
		text-align: right;
		font-size: 28rpx;
		font-weight: 500;
		color: #9296AF;
		margin: 20rpx 0 0 0;
	}

	.n_box {
		flex: 1;
	}

	.sf {

		font-size: 28rpx;

		font-weight: bold;
		color: #252B50;
		text-align: right;

	}

	.yj_box {
		margin: 40rpx 0 25rpx 0;
		font-size: 30rpx;
		font-weight: 500;
		color: #252B50;
	}

	.h_box {
		font-size: 30rpx;
		font-weight: 500;
		color: #636676;
	}

	.b_box {

		font-size: 30rpx;
		font-weight: 500;

		color: #9296AF;

	}

	.mb {
		margin-bottom: 40rpx;
	}

	.xian {
		width: 100%;
		height: 1rpx;
		background-color: #F8F8F8;
	}

	.bottom_box {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		box-sizing: border-box;
		padding: 50rpx 30rpx;
	}

	.but {
		width: 80%;
		height: 75rpx;
		line-height: 75rpx;
		text-align: center;
		border-radius: 34rpx;
		color: #fff;
	}

	.kf {
		background: #32CBC7;
		border: 1rpx solid #32CBC7;
		box-shadow: 0px 3px 11px 0px rgba(50, 203, 199, 0.34);
	}

	.th {

		background: #3C7CFF;
		border: 1rpx solid #3C7CFF;
		box-shadow: 0px 3px 11px 0px rgba(60, 124, 255, 0.34);

	}
</style>